<!-- 上传组件 -->
<template>
  <div class="upload">
    </div>
</template>

<script>
import $ from 'jquery'
import WebUploader from 'webuploader'
export default {
  name: 'WebUpload',
  data () {
    return {
        uploader: null
    };
  },
  props: {
      accept: {
          type:Object,
          default: null
      },
      // 上传地址
      url: {
        type: String,
        default: ''
      },
     // 上传最大数量 默认为100
      fileNumLimit: {
         type:Number,
         default: 100
      },
     //  大小限制 默认2M
     fileSingleSizeLimit: {
        type: Number,
        default: 2048000
     },
     // 上传时传给后端的参数 一般为token,key等
     formData: {
         type:Object,
         default:null
     },
     // 生成formData中文件的key 
     keyGenerator: {
         type:Function,
         default(file) {
             const currentTime = new Date().getTime();
             const key = `${currentTime}.${file.name}`
             return key;
         }
     },
     multiple: {
        type:Boolean,
        default: false
     },
     // 上传按钮ID
     uploadButton: {
         type:String,
         default: ''
     }

  },

  components: {},

  computed: {
      
  },

  mounted() {
    this.initWebUpload();
  },

  methods: {
    initWebUpload() {
       this.uploader = WebUploader.create({
           auto: true,
           swf: '../assets/static/Uploader.swf',
           server: this.url,  // 文件接收服务端
           pick: {
               id:this.uploadButton, //选择文件的按钮
               multiple:this.multiple, // 是否多文件上传 默认为false
               label: ''
           },
           accept:this.getAccept(this.accept),  // 配置允许文件上传格式
           threads: 3,
           fileNumLimit:this.fileNumLimit,  // 限制上传个数
           formData:this.formData,  // 上传所需参数
           chunked: true,  // 分片上传
           chunkSize: 2048000,   // 分片大小
           duplicate: true // 重复上传
       });

       // 当文件被添加到队列的时候 添加到页面预览
       this.uploader.on('fileQueued',(file)=>{
           this.$emit('fileChange',file);
       });

        this.uploader.on('uploadStart',(file)=>{
            this.uploader.options.formData.key = this.keyGenerator(file);
        })

        // 文件上传过程中 创建进度条实时显示
        this.uploader.on('uploadProgress',(file,percentage)=> {
            this.$emit('progress',file,percentage);
        })
        // 文件上传成功
        this.uploader.on('uploadSuccess',(file,response)=>{
            this.$emit('success',file,response);
        })
        // 文件上传失败
        this.uploader.on('error',(type)=>{
            let errorMessage = '';
            if(type === 'F_EXCEED_SIZE') {
                errorMessage = `文件大小不能超过${this.fileSingleSizeLimit}/(1024 * 1000)M`;
            }else if(type === 'Q_EXCEED_NUM_LIMIT') {
                errorMessage = '文件上传已达到最大上限'
            }else {
                errorMessage = '上传出错! 请检查后重新上传';
            }
            this.$emit('error',errorMessage);
        })

        // 上传完成
        this.uploader.on('uploadComplete',(file,response)=>{
            this.$emit('complete',file,response);
        });
    },

    upload(file) {
        this.uploader.upload(file);
    },

    stop(file) {
        this.uploader.stop(file);
    },
    // 取消并中断文件上传
    cancelFile(file) {
        this.uploader.cancelFile(file);
    },

    // 在队列中移除文件
    removeFile(file,bool) {
        this.uploader.removeFile(file,bool);
    },

    getAccept(accept) {
        switch(accept) {
            case 'text':
                return {
                    title: 'Texts',
                    exteensions: 'doc,docx,xls,xlsx,ppt,pptx,pdf,txt',
                    mimeTypes: '.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt'
                };
            case 'video':
                return {
                    title: 'Videos',
                    exteensions: 'mp4',
                    mimeTypes: '.mp4'
                };
            case 'image':
                return {
                    title: 'Images',
                    exteensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: '.gif,.jpg,.jpeg,.bmp,.png'
                };
            default: return accept
        }
    }
  }
}

</script>
<style lang='scss' scoped>
@import url('../assets/static/webuploader.css');
</style>